/*
 * Copyright Thoughtworks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import classNames from "classnames/bind";
import { ApiResult } from "helpers/api_request_builder";
import { i18n } from "helpers/i18n";
import { MithrilViewComponent } from "jsx/mithril-component";
import m from "mithril";
import { AgentConfigState } from "models/agents/agents";
import { EnvironmentsService, ResourcesService } from "models/agents/agents_crud";
import { StaticAgentsVM } from "models/agents/agents_vm";
import * as Buttons from "views/components/buttons";
import { ButtonGroup } from "views/components/buttons";
import { FlashMessageModelWithTimeout } from "views/components/flash_message";
import { SearchField } from "views/components/forms/input_fields";
import { KeyValuePair } from "views/components/key_value_pair";
import { EnvironmentsDropdownButton } from "views/pages/agents/environment_dropdown_button";
import { ResourcesDropdownButton } from "views/pages/agents/resources_dropdown_button";
import style from "./index.scss";

const classnames = classNames.bind(style);

interface AgentHeaderPanelAttrs {
  agentsVM: StaticAgentsVM;
  onEnable: (e: MouseEvent) => void;
  onDisable: (e: MouseEvent) => void;
  onDelete: (e: MouseEvent) => void;
  flashMessage: FlashMessageModelWithTimeout;
  updateEnvironments: (environmentsToAdd: string[], environmentsToRemove: string[]) => Promise<ApiResult<string>>;
  updateResources: (resourcesToAdd: string[], resourcesToRemove: string[]) => Promise<ApiResult<string>>;
}

export class AgentHeaderPanel extends MithrilViewComponent<AgentHeaderPanelAttrs> {
  view(vnode: m.Vnode<AgentHeaderPanelAttrs, this>) {
    const agentsVM = vnode.attrs.agentsVM;
    return (
      <div class={style.headerPanel}>
        <div class={style.leftContainer}>
          <ButtonGroup>
            <Buttons.Danger
              data-test-id="delete-agents"
              onclick={vnode.attrs.onDelete}
              disabled={!agentsVM.hasSelectedAgents()}
            >
              {i18n.tSyncForPage("agents.actions.delete", "agents")}
            </Buttons.Danger>
            <Buttons.Primary
              data-test-id="enable-agents"
              onclick={vnode.attrs.onEnable}
              disabled={!agentsVM.hasSelectedAgents()}
            >
              {i18n.tSyncForPage("agents.actions.enable", "agents")}
            </Buttons.Primary>
            <Buttons.Secondary
              data-test-id="disable-agents"
              onclick={vnode.attrs.onDisable}
              disabled={!agentsVM.hasSelectedAgents()}
            >
              {i18n.tSyncForPage("agents.actions.disable", "agents")}
            </Buttons.Secondary>
            <EnvironmentsDropdownButton
              show={agentsVM.showEnvironments}
              agentsVM={agentsVM}
              updateEnvironments={vnode.attrs.updateEnvironments}
              flashMessage={vnode.attrs.flashMessage}
              service={new EnvironmentsService()}
            />
            <ResourcesDropdownButton
              show={agentsVM.showResources}
              agentsVM={agentsVM}
              updateResources={vnode.attrs.updateResources}
              flashMessage={vnode.attrs.flashMessage}
              service={new ResourcesService()}
            />
          </ButtonGroup>

          <KeyValuePair
            inline={true}
            data={
              new Map([
                [i18n.tSyncForPage("agents.table.headers.total", "agents"), this.span(agentsVM.list().length)],
                [
                  i18n.tSyncForPage("agents.table.headers.pending", "agents"),
                  this.span(agentsVM.filterBy(AgentConfigState.Pending).length),
                ],
                [
                  i18n.tSyncForPage("agents.table.headers.enabled", "agents"),
                  this.span(agentsVM.filterBy(AgentConfigState.Enabled).length, style.enabled),
                ],
                [
                  i18n.tSyncForPage("agents.table.headers.disabled", "agents"),
                  this.span(agentsVM.filterBy(AgentConfigState.Disabled).length, style.disabled),
                ],
              ])
            }
          />
        </div>

        <SearchField
          property={vnode.attrs.agentsVM.filterText}
          placeholder={i18n.tSyncForPage("agents.table.filter_agents", "agents")}
          label={i18n.tSyncForPage("agents.table.search_for_agents", "agents")}
        />
      </div>
    );
  }

  private span(count: number, className: string = ""): m.Children {
    return <span class={classnames(style.count, className)}>{count}</span>;
  }
}
